<!--
 * @Author: zhangyonggui
 * @Date: 2023-12-14 15:58:32
 * @LastEditors: zhangyonggui
 * @LastEditTime: 2024-01-20 10:57:36
 * @Descripttion: 
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="value"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    width="360px"
    top="30vh"
  >
    <div class="dialog-body">
      <template v-if="contentSlot">
        <slot name="content"></slot>
      </template>
      <template v-else>
        {{ content }}
      </template>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="close">取 消</el-button>
      <el-button type="primary" size="small" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts" setup> 
  import {defineProps,defineEmits} from 'vue';
  const emit=defineEmits(['input'])
  const props=defineProps({
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '确认',
    },
    content: {
      type: String,
      default: '确认要执行此操作吗？',
    },
    confirmCb: {
      type: Function,
    },
    contentSlot: {
      type: Boolean,
      default: false,
    },
  })
 const confirm=()=> {
      if (typeof props.confirmCb === 'function') {
        props.confirmCb()
      }
      close()
    }
   const close=()=> {
      emit('input', false)
    }
</script>
<style lang="scss" scoped>
.dialog-body {
  color: rgb(255, 255, 255);
}
</style>
